<template>
  <common-card title="今日订单" :value="numberFormat(orderToday)">
  <div ref="lineChartRef" style="width:100%;height:100%;"></div>
  <template #footer>
  <span>昨日订单量</span>
  <span class="emphasis">&nbsp{{ numberFormat(orderLastDay) }}</span>
  </template>
  </common-card>
</template>

<script lang="ts">

export default {
  name: "TodayOrders",
 
};
</script>

<script lang="ts" setup>
import CommonCard from './CommonCard.vue'
import { ref, onMounted,computed,watch} from 'vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()


const lineChartRef = ref()
let lineChart: EChartsType

//今日订单量
const orderToday = computed(()=>reportDataStore.reportData.orderToday)
//昨日订单量
const orderLastDay = computed(()=>reportDataStore.reportData.orderLastDay)
//Y轴数据
const orderTrend = computed(()=>reportDataStore.reportData.orderTrend || [])
//x轴的数据
const orderTrendAxis = computed(()=>reportDataStore.reportData.orderTrendAxis || [])

const getOption=()=>{
  return{
    xAxis:{
      boundaryGap: false,
      data: orderTrendAxis.value
    },
    yAxis:{
      show: false
    },
    grid:{
       left:0,
       top:0,
       bottom:0,
       right:0
    },
    series:{
      
        name:'今日订单',
        type: 'line',
        data:orderTrend.value,
        smooth: true,
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          opacity:0
        },
        areaStyle:{
          color:'purple'
        }  
    },
    tooltip:{
      trigger:'axis',
      confine: true
    }
  }
}

onMounted(()=>{
  lineChart = echarts.init(lineChartRef.value)
  lineChart.setOption(getOption())
  //实现响应式效果
  window.addEventListener('resize',()=>{
    lineChart.resize()
  })
})

watch(orderToday,()=>{
  lineChart.setOption(getOption())
})
</script>

<style scoped></style>